import { Callout } from "nextra-theme-docs";

# useFlow 순환참조 해결하기

<Callout type="info" emoji="💡">
  [Future API](/api-references/future-api/introduction)를 사용하면 `useFlow()` 순환참조 문제를 쉽게 해결할 수 있어요. [Future API](/api-references/future-api/introduction) 사용을 권장해요. 
</Callout>

`stackflow()` 함수가 반환하는 `useFlow()` 함수는 선언된 액티비티 타입을 활용해요. 따라서 `useFlow()`와 액티비티 컴포넌트는 서로 맞물리면서 순환 참조(Circular Dependency)를 일으켜요.
`useActions()` 훅을 사용하고 타입을 따로 `import` 받으면 이러한 순환 참조를 제거할 수 있어요.

```tsx showLineNumbers filename="stackflow.ts" copy
import { stackflow } from "@stackflow/react";

export const { Stack, activities } = stackflow({
  activities: {
    // ...
  },
  // ...
});

// 다음과 같이 액티비티의 타입을 노출해요.
export type TypeActivities = typeof activities;
```

```tsx showLineNumbers filename="stackflow.ts" copy
import { useActions } from "@stackflow/react";

// 노출된 액티비티 타입만 가져와서 사용해요.
import type { TypeActivities } from "./stackflow";

export const useMyFlow = () => {
  return useActions<TypeActivities>();
};
```

<Callout emoji="⚡️">
  `TypeActivities`는 앞으로 제공될 유틸 컴포넌트/훅 들에 비슷하게 활용돼요.
</Callout>
